import React from 'react'
import ReactDOM from 'react-dom/client'

class NameForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            age: '',
            sex: '0',
            hobby: [],
            flavor: 'grapefruit',
            area: '',
        }
    }

    handlerSubmit = (event) => {
        alert("您提交的信息:" + JSON.stringify(this.state))
        event.preventDefault()
    }

    handlerInputChange = (event) => {
        const target = event.target
        // const checkbox = target.type === 'checkbox' ? target.checked : target.value
        // const radio = target.type === 'radio' ? target.selected : target.value
        const name = target.name
        // if (target.type === 'checkbox') {
        //     console.log("target", target)
        //     target.value = this.state.hobby.concat(',', ...target.value).toLocaleString().substring(1)
        //     console.log("value", target.value)
        // }
        if (target.type === 'radio') {
            console.log("sex", target.value)
        }
        this.setState({
            [name]: target.value
        })
    }
    changeTextArea = (event) => {
        this.setState({ area: event.target.value })
    }
    changeSelect = (event) => {
        this.setState({ flavor: event.target.value })
    }
    render () {
        return (
            <form onSubmit={this.handlerSubmit}>
                <label>
                    名字：
                    <input type="text" name="name" onChange={this.handlerInputChange} />
                </label>
                <br />
                <label>
                    年龄：
                    <input type="text" name="age" onChange={this.handlerInputChange} />
                </label>
                <br />
                <label>
                    风味：
                    <select name="flavor" onChange={this.changeSelect}>
                        <option value="grapefruit">葡萄柚</option>
                        <option value="lime">酸橙</option>
                        <option value="coconut">椰子</option>
                        <option value="mango">芒果</option>
                    </select>
                </label>
                <br />
                <label>
                    文章：
                    <textarea name={this.state.area} onChange={this.changeTextArea} />
                </label>
                <br />
                <input type="submit" value="提交" />
            </form>
        )
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<NameForm />)